<template>
  <div>
    <el-card class="search-card">
      <PageHeader />
    </el-card>
    <el-card class="table-card">
      <PageTabs
        :nativeName.sync="nativeName"
        @switch-tabs="handleSwitchTabs"
      />
      <component :is="nativeComponent" :nativeName="nativeName" />
    </el-card>
  </div>
</template>
<script>
import PageHeader from './PageHeader';
import PageTabs from './PageTabs';
import ProductInfo from './ListModule/ProductInfo';
import PurchaseInfo from './ListModule/PurchaseInfo';
import SaleInfo from './ListModule/SaleInfo';
import AcceptanceStandard from './ListModule/AcceptanceStandard';
import QualificationType from './ListModule/QualificationType';
import ImageTextInfo from './ListModule/ImageTextInfo';
import { NATIVE_NAMES } from '../constants';
export default {
  components: {
    PageHeader,
    PageTabs,
    ProductInfo,
    PurchaseInfo,
    SaleInfo,
    AcceptanceStandard,
    QualificationType,
    ImageTextInfo,
  },
  data () {
    return {
      nativeName: NATIVE_NAMES.ProductInfo,
    }
  },
  computed: {
    nativeComponent () {
      const componentMaps = {
        [NATIVE_NAMES.ProductInfo]: 'ProductInfo',
        [NATIVE_NAMES.PurchaseInfo]: 'PurchaseInfo',
        [NATIVE_NAMES.PurchaseInfoMulti]: 'PurchaseInfo',
        [NATIVE_NAMES.SaleInfo]: 'SaleInfo',
        [NATIVE_NAMES.SaleInfoMulti]: 'SaleInfo',
        [NATIVE_NAMES.SaleInfoNew]: 'SaleInfo',
        [NATIVE_NAMES.AcceptanceStandard]: 'AcceptanceStandard',
        [NATIVE_NAMES.QualificationType]: 'QualificationType',
        [NATIVE_NAMES.ImageTextInfo]: 'ImageTextInfo',
      }
      return componentMaps[this.nativeName]
    }
  },
  methods: {
    // 切换tab页签
    handleSwitchTabs (tab) {
    }
  }
}
</script>
